<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>注册页面</title>
	<style type="text/css">
		.container{
			width: 600px;
			border: 1px solid black;
			margin: 20px auto;
		}
		.dlm{
			margin-left: 64px;
		}
		.again{
			margin-left: 16px;
		}
		.yx{
			margin-left: 48px;
		}
		.gender{
			margin-left: 80px;
		}
		.tx{
			margin-left: 80px;
		}
		.borth{
			margin-left: 48px;
		}
		p{
			margin-bottom: 20px;
			margin-left: 80px;
		}
	</style>
</head>
<body>
	<div class="container">
		<form action="">
			<p id="name">
				<label>名字：</label>
				<input type="text" name="" id="nameInput">
				<span id="nameSpan"></span>
			</p>
			<p id="lastName">
				<label>姓氏：</label>
				<input type="text" name="" id="lastNameInput">
				<span id="lastNameSpan"></span>
			</p>
			<p class="dlm" id="loginName">
				<label>登录名：</label>
				<input type="text" name="" id="loginNameInput">
				<span id="loginNameSpan"></span>
			</p>
			<p>
				<label>密码：</label>
				<input type="password" name="" id="password">
				<span id="passwordSpan"></span>
			</p>
			<p class="again">
				<label>再次输入密码：</label>
				<input type="password" name="" id="again">
				<span id="againSpan"></span>
			</p>
			<p class="yx">
				<label>电子邮箱：</label>
				<input type="text" name="" id="email">
				<span id="emailSpan"></span>
			</p>
			<p class="gender">
				<label>性别：</label>
				<input type="radio" name="gender">男
				<input type="radio" name="gender">女
			</p>
			<p class="tx">
				<label>头像：</label>
				<input type="file" name="">
			</p>
			<p>
				<label>爱好：</label>
				<input type="checkbox" name="">动漫
				<input type="checkbox" name="">游戏
				<input type="checkbox" name="">漫画
			</p>
			<p class="borth">
				<label>出生日期：</label>
				<input type="" name="" size="2" id="year">年<span id="yearSpan"></span>
				<input type="" name="" size="2" id="month">月<span id="monthSpan"></span>
				<input type="" name="" size="2" id="day">日<span id="daySpan"></span>
				<span id="borthSpan"></span>
			<p>
				<input type="submit" name="" value="提交">
				<input type="reset" name="" value="重填">
			</p>
		</form>
	</div>
</body>
<script type="text/javascript">
	function $(id){
		return document.getElementById(id);
	}
	//绑定姓名和姓氏的失去焦点事件
	var nameReg=/^\D+$/;
	$('nameInput').onblur=function(){
		var content=$('nameInput').value;
		if(nameReg.test(content)==false){
			$('nameSpan').innerText='名字不能为空且不能为数字！';
			$('nameSpan').style.color='red';
			$('nameSpan').style.fontSize='14px';
		}else{
			$('nameSpan').innerText='√';
			$('nameSpan').style.color='green';
		}
	}
	var lastNameReg=/^\D+$/;
	$('lastNameInput').onblur=function(){
		var content=$('lastNameInput').value;
		if(lastNameReg.test(content)==false){
			$('lastNameSpan').innerText='名字不能为空且不能为数字！';
			$('lastNameSpan').style.color='red';
			$('lastNameSpan').style.fontSize='14px';
		}else{
			$('lastNameSpan').innerText='√';
			$('lastNameSpan').style.color='green';
		}
	}
	//绑定登陆名的失去焦点事件
	var loginNameReg=/^[a-z0-9_]+$/;
	$('loginNameInput').onblur=function(){
		var content=$('loginNameInput').value;
		if(loginNameReg.test(content)==false){
			$('loginNameSpan').innerText='登陆名只可以为a-z,0-9或下划线';
			$('loginNameSpan').style.color='red';
			$('loginNameSpan').style.fontSize='14px';
		}else{
			$('loginNameSpan').innerText='√';
			$('loginNameSpan').style.color='green';
		}
	}
	//绑定密码的失去焦点事件
	var passwordReg=/^\S{6,}$/;
	$('password').onblur=function(){
		var content=$('password').value;
		if(passwordReg.test(content)==false){
			$('passwordSpan').innerText='密码至少包含6个字符';
			$('passwordSpan').style.color='red';
			$('passwordSpan').style.fontSize='14px';
		}else{
			$('passwordSpan').innerText='√';
			$('passwordSpan').style.color='green';
		}
	}

	$('again').onblur=function(){
		if($('password').value!==$('again').value){
			$('againSpan').innerText='两次密码输入不一致！';
			$('againSpan').style.color='red';
			$('againSpan').style.fontSize='14px';
		}else{
			$('againSpan').innerText='√';
			$('againSpan').style.color='green';
		}		
	}
	//绑定邮箱失去焦点事件
	var emailReg=/^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/;
	$('email').onblur=function(){
		var content=$('email').value;
		if(emailReg.test(content)==false){
			$('emailSpan').innerText='邮箱格式不正确';
			$('emailSpan').style.color='red';
			$('emailSpan').style.fontSize='14px';
		}else{
			$('emailSpan').innerText='√';
			$('emailSpan').style.color='green';
		}
	}
	//绑定出生日期失去焦点事件
	var yearReg=/^[1-9]{1}[0-9]{3}$/;
	var monthReg=/^(0([1-9]))|(1(0|1|2))$/;
	var dayReg=/^([1-9]|[1-2]\d|[3][0-1])$/;
	$('year').onblur=function(){
		var content=$('year').value;
		if(yearReg.test(content)==false){
			$('borthSpan').innerText='请填写正确的出生日期';
			$('borthSpan').style.color='red';
			$('borthSpan').style.fontSize='14px';
		}else{
			$('yearSpan').innerText='√';
			$('yearSpan').style.color='green';
			$('borthSpan').innerText='';
		} 
	}
	$('month').onblur=function(){
		var content=$('month').value;
		if(monthReg.test(content)==false) {
			$('borthSpan').innerText='请填写正确的出生日期';
			$('borthSpan').style.color='red';
			$('borthSpan').style.fontSize='14px';
		}else{
			$('monthSpan').innerText='√';
			$('monthSpan').style.color='green';
			$('borthSpan').innerText='';

		} 
	}
	$('day').onblur=function(){
		var content=$('day').value;
		if(dayReg.test(content)==false){
			$('borthSpan').innerText='请填写正确的出生日期';
			$('borthSpan').style.color='red';
			$('borthSpan').style.fontSize='14px';
			$('daySpan').innerText='';
		}else{
			$('daySpan').innerText='√';
			$('daySpan').style.color='green';
			$('borthSpan').innerText='';
		} 
	}
</script>
</html>